<script setup lang="ts">
import { ref } from 'vue'; // 导入 ref

import CustomerTable from './components/customerTable.vue';
import CustomerTree from './components/customerTree.vue';

// 定义一个 ref 来存储从 customerTree 接收到的值
const selectedValue = ref('');
// 定义一个 ref 来存储选中节点的ID
const selectedNodeId = ref<null | string>(null);
// 定义一个 ref 来存储选中节点的层级
const selectedLevel = ref<number>(0);

// 定义处理 customerTree 事件的方法
const handleSelectedValueUpdate = (value: string) => {
  selectedValue.value = value;
};

// 定义处理节点选择的方法
const handleNodeIdUpdate = (id: string) => {
  selectedNodeId.value = id;
  // 获取表格组件的引用
  if (customerTableRef.value) {
    // 调用表格组件的getTableData方法，传入选中节点ID
    customerTableRef.value.getTableData([id]);
  }
};
const handleLevelUpdate = (level: number) => {
  selectedLevel.value = level;
};
// 获取表格组件的引用
const customerTableRef = ref(null);
</script>

<template>
  <div class="m-3 flex">
    <CustomerTree
      @update:selected-value="handleSelectedValueUpdate"
      @update:node-id="handleNodeIdUpdate"
      @update:level="handleLevelUpdate"
    />
    <CustomerTable
      ref="customerTableRef"
      :selected-type="selectedValue"
      :selected-node-id="selectedNodeId"
      :selected-level="selectedLevel"
    />
  </div>
</template>

<style scoped></style>
